<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:replace="layout-vue">
<head>
    <meta charset="UTF-8">


    <th:block th:fragment="header">
        <style>

 #raphael1{
  border:solid #0088FF 1px;
  width:[[${width}]]px;
  height:[[${height}]]px;
  margin:auto;
 }

 #raphael1 svg{
  background-image:url(/static/images/001.jpeg)
 }




        </style>
    </th:block>

</head>
<body>

<div class="container-md" id="container" th:fragment="content">
    <div class="form-horizontal" id="app">
        <div class="card card-info" style="max-width:200mm;margin:auto;">
            <div class="card-header">
                <h3 class="card-title">用户登录</h3>
            </div>
            <div class="card-body">
                <div class="form-group row">
                    <label for="inputEmail3" class="col-sm-2 col-form-label">用户名</label>
                    <div class="col-sm-10">
                        <input class="form-control" name="username" id="inputEmail3" placeholder="用户名" v-model="login.username">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="inputPassword3" class="col-sm-2 col-form-label">密码</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" name="password" id="inputPassword3" v-model="login.password"
                               placeholder="Password">
                    </div>
                </div>
                <div class="form-group row">
                    <div class="offset-sm-2 col-sm-10">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="exampleCheck2">
                            <label class="form-check-label" for="exampleCheck2">Remember me</label>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.card-body -->
            <div class="card-footer"><input type="hidden" name="type" value="username"/>
                <button class="btn btn-info" @click="doLogin(login)">登 录</button>
            </div>
            <!-- /.card-footer -->
        </div>
    </div>


</div>

<th:block th:fragment="footer">
    <script>

   function callApi(url,data){
    axios.post(url,data).then(function (response) {
        console.log( response)
    }).catch(function (error) {
        console.log("error",error);
    }); }


    </script>
    <script>

const { createApp } = Vue;
    var app = createApp({
    data() {
      return {
        list:[], total:0 , login:{session:true,type:"username",username:null,password:null},
        currentIndex : -1,
        selector:{target:{},pageSize:20}
      }
    },methods:{
        doLogin:function (login){
            var url = "/login";
            axios.post(url, login).then(function (res) {
                console.log("response",res)
                store.set("accessToken",res?.data?.accessToken);
                store.set("loginedUser",res?.data?.user);
            }).catch(function (error) {
                console.log("error",error);
                loadData();
            });
        }
     }
  }).mount('#app');










    </script>
</th:block>
</body>
</html>